import './MaSearch.css'
import { Button, } from 'antd';
import { useEffect, useState, useRef, createRef } from "react";
import { LeftOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom"
import { getDetail, getSameGoods } from "@/tools/ajax";
import { useSearchParams } from "react-router-dom"
import { Rate } from 'antd';
export default () => {
    const navigate = useNavigate()
    const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
    const [value, setValue] = useState(3);
    const [search] = useSearchParams()
    const [mains, setMains] = useState(false)
    const [url, setUrl] = useState("")

    const [goodsData, setGoodsData] = useState({});
    const [goodsImgs, setGoodsImgs] = useState([]);
    const [sameList, setsameList] = useState([]);

    const [titls, setTitls] = useState("");

    const hello = useRef()
    const manage = createRef()
    const large = createRef()

    const small = (url) => {
        // console.log(url, "1111");
        setUrl(url)
    }

    useEffect(function () {
        getGoodsData();
        setGoodsImgs(goodsImgs)
    }, [])
    const enter = () => {
        setMains(true)
    }
    const leave = () => {
        setMains(false)
    }
    const move = (e) => {
        if (manage.current) {
            let X = e.nativeEvent.offsetX
            let Y = e.nativeEvent.offsetY
            // 调整临界点
            if (X <= 100) {
                X = 100;
            }
            if (X >= 398) {
                X = 398
            }
            if (Y <= 100) {
                Y = 100;
            }
            if (Y >= 300) {
                Y = 300
            }
            manage.current.style.left = X - 100 + 'px';
            manage.current.style.top = Y - 100 + 'px';

            large.current.style.marginLeft = -X * 2 + 210 + 'px';
            large.current.style.marginTop = -Y * 2 + 200 + 'px';

        }
    }

    const getGoodsData = () => {

        getDetail({ goodId: search.get("id") }).then((res) => {
            setGoodsImgs([...JSON.parse(res.data[0].imgs)])
            setGoodsData(res.data[0]);
            tengs()
        })

    }

    const tengs = () => {
        setGoodsData((goodsData) => {
            console.log("de,fwefw", goodsData.supplier);
            setTitls(goodsData.supplier)
            getSameGoods({
                supplier: goodsData.supplier
            }).then((res) => {
                console.log(res.data);
                setsameList([...res.data])
                console.log("ssss", sameList);

            })
            return goodsData
        })

    }

    return <div className="conrneg">
        <div className="detail-box">
            <Button onClick={() => navigate(-1)} icon={<LeftOutlined />}>返回</Button>
            <div className='detail-main'>
                <div className='left' onMouseMove={move}>
                    {
                        mains ? <div id="mask" ref={manage} onMouseMove={(e) => { e.stopPropagation() }}></div>
                            : ""
                    }
                    <img src={url ? url : goodsImgs[0]} alt="" className='imgs' onMouseEnter={enter} onMouseLeave={leave} />

                    {
                        goodsImgs.map((item, i) => {
                            if (i > 0) {
                                return (
                                    <img className='imgss' src={item} alt="" key={i} onClick={() => { small(item) }} />
                                )
                            }

                        })
                    }

                    {
                        mains ?
                            <div className='bigBox' onMouseEnter={enter} onMouseLeave={leave}>
                                <img src={url ? url : goodsImgs[0]} alt="" className='big' ref={large} />
                            </div>
                            : ""
                    }
                </div>

                <div className='right'>
                    <div className='rights'>
                        <h2 className='title' >{goodsData.title}</h2>
                        <p className="supplier">{goodsData.supplier}</p>
                        <p className="price">￥{goodsData.priceStr}</p>
                        <span>
                            <Rate tooltips={desc} onChange={setValue} value={value} />
                            {value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ''}
                        </span>
                        <Button type="primary" danger>
                            加入购物车
                        </Button>
                    </div>
                </div>
            </div>
        </div>
        <section>
            <p className="title">相似商品推荐</p>

        </section>
        <div>
            <ul className='list'>
                    {
                        sameList[0] && sameList.map((item, i) => {
                            return <li key={i} className="borderss">
                                <img src={item.imageUrl} alt="" className='imageUrl' />
                                <h4 >{item.title}</h4>
                                <p className="boxs">
                                    <span className="price">￥{item.priceStr}</span>
                                    <span className="price" dangerouslySetInnerHTML={{ __html: item.mack }}></span>
                                </p>
                            </li>
                        })
                    }
            </ul>
        </div>
    </div>
}